import React from 'react';
import { Tooltip, Popover } from 'antd';
//@ts-ignore
import { DownOutlined } from '#/utils/antdIcons';
import type { IStationNodeListType, IStationListType } from '../../type';
import styles from './index.less';

interface IProps {
  /**
   * 节点信息
   */
  nodeInfo?: IStationNodeListType;
  /**
   * 样式
   */
  style: any;
}

const Node = (props: IProps) => {
  const { nodeInfo, style } = props;

  const renderContent = (values: IStationListType[]) => {
    return (
      <div
        className={styles.stations}
        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
      >
        {values.map((item, index) => {
          return (
            <div
              className={styles.station}
              style={{ fontSize: '12px', lineHeight: '22px', wordBreak: 'keep-all' }}
              key={`${item.stationId}-${index}`}
            >
              {item?.stationName || '-'}
            </div>
          );
        })}
      </div>
    );
  };
  return (
    <div className={styles.container}>
      <div className={styles.content} style={style}>
        <Tooltip placement="topLeft" title={nodeInfo?.nodeNameAlias}>
          <Popover
            placement="bottomRight"
            content={renderContent(nodeInfo?.stationList || [])}
            overlayClassName={styles.popover}
            trigger="click"
          >
            <div className={styles.nodeName}>{nodeInfo?.nodeNameAlias}</div>
          </Popover>
        </Tooltip>
        <Popover
          placement="bottomRight"
          content={renderContent(nodeInfo?.stationList || [])}
          overlayClassName={styles.popover}
          trigger="click"
        >
          <div className={styles.stationList}>
            <DownOutlined className={styles.logo} />
          </div>
        </Popover>
      </div>
    </div>
  );
};

export default Node;
